<template>
	<view class="p-box">
		<view class="search-box">
			<view style="display: flex;" @click="chooseTime">
				<u-picker mode="time" v-model="show" :params="params" @cancel="cancel" @confirm="chooseDate"></u-picker>
				<view>{{dateStrShow == '' ? '全部日期' : dateStrShow }}</view>
				<u-icon name="arrow-down" style="margin-left: 5px;margin-top: 2px;"></u-icon>
			</view>
			<view style="display: flex;">
				<text style="margin-right: 5px;">总支出</text>
				<view style="color: green;font-weight: bold;">&emsp;￥{{amountTotal}}</view>
			</view>
		</view>
		<view class="c-box">
			<u-cell-group v-for="(item,index) in recordList" :key="index">
				<u-cell-item @click="getDetail(item)" :label="item.label" :title="item.title" :value="item.value"
					:arrow="false" :bg-color="!item.top ? '#fff' : '#ccc'" :valueStyle="valueClass">
				</u-cell-item>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
	import {
		payApis,
	} from '@/apis/index'
	export default {
		data() {
			return {
				xialaImg: {
					src: '../../static/imgs/xiala.png'
				},
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				valueClass: {
					color: 'green',
					fontWeight: 'bold'
				},
				show: false,
				dateStrShow: '',
				amountTotal: 500,
				recordList: []
			}
		},
		mounted() {
			this.getRecordResult('')
		},
		methods: {
			chooseTime() {
				this.show = true
			},

			getDetail(item) {
				if (item.id == null || item.id == '') {
					return
				}

				uni.navigateTo({
					url: '../payDetail/payDetail?label=' + item.label + '&title=' + item.title + '&value=' + item
						.value + '&number=' + item.number + '&type='
					+ item.type + '&dayNumber=' + item.dayNumber
				});
			},

			chooseDate(obj) {
				let str = obj.year + '年' + obj.month + '月'
				this.dateStrShow = str
				let dateStr = obj.year + '-' + obj.month

				this.getRecordResult(dateStr);
			},
			cancel() {
				this.getRecordResult('');
			},
			getRecordResult(dateStr) {
				var _this = this
				let param = {
					dateStr: dateStr
				}
				payApis.getRecordResult(param).then((res) => {
					_this.recordList = res.data.data.recordList
					_this.amountTotal = res.data.data.amountTotal
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.p-box {}

	.search-box {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
		margin-top: 10px;
		padding: 10px;
	}

	.c-box {
		background-color: white;
		height: 90vh;
		overflow-y: scroll;
	}
</style>